<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">

<h:head>

</h:head>

<h:body>

	<f:view locale="#{languageDetails.locale}">

	<b> <h:outputText value="#{msg.user_details_form}">
		</h:outputText>
	</b>
	<p>
		<h:messages style="color: blue" />
	</p>


	<h:form id="userDetailsForm">
	
         <h:outputText style="color: red"
                rendered="#{userDetails.ageCorrected}"
                value="Your age corrected to #{userDetails.age}">
         </h:outputText>
         <br />
         <h:outputText style="color: red"
                 rendered="#{userDetails.showNameErrorMessage}"
                 value="#{userDetails.nameErrorMessage}">
         </h:outputText>
         <br />
         
         <h:outputText style="color: red"
                 rendered="#{userDetails.showErrorMessage}"
                 value="#{userDetails.errorMessage}"></h:outputText>
                 
		<h:panelGrid columns="2">
			<h:outputText value="#{msg.name}"></h:outputText>
			<h:inputText id="name" value="#{userDetails.name}" required="true"
				requiredMessage="#{msg.enter_name}"
				validatorMessage="#{msg.enter_name_validlength}"
				valueChangeListener="#{userDetails.valueChangeInput}">
				<f:validateLength minimum="3" />
			</h:inputText>

			<h:outputText value="#{msg.age}"></h:outputText>
			
			<h:inputText id="age" value="#{userDetails.age}" required="true"
				requiredMessage="#{msg.enter_age}"
				validatorMessage="#{msg.enter_correctage}">
			<f:validateLength maximum="3"></f:validateLength></h:inputText>


			<h:outputText value="#{msg.enter_email}"></h:outputText>
			
			<h:inputText id="email" value="#{userDetails.email}" required="true"
				requiredMessage="#{msg.enter_email}"></h:inputText>

			<h:outputText value="#{msg.dob}"></h:outputText>
			
			<h:inputText id="dob" value="#{userDetails.dob}" required="true"
				requiredMessage="#{msg.enter_dob}"
				converterMessage="#{msg.enter_dobpattern}">
				<f:convertDateTime type="date" pattern="MM/dd/yyyy" />
			</h:inputText>

		</h:panelGrid>
		<h:commandButton id="btnConfirm" value="Confirm Age"
			actionListener="#{userDetails.calculateAgeListener}"></h:commandButton>
			
		<h:commandButton id="btnSubmit" value="#{msg.submit}" 
		action="#{userDetails.submitUserDetails}"></h:commandButton>	
	</h:form>
	
	</f:view>

</h:body>

</html>